var InvalidRecord = function () {
  var template = /* html */ `
    <div class="invalid-record" v-loading.fullscreen.lock="loading">
      <search-btn-view appendToBody btn-text="查询记录" :before-search="checkSearchValid" @before-open="resetSearch" @search="searchData">
        <template slot="append">
          <el-button size="medium" type="primary" @click="exportExcel">导出excel</el-button>
        </template>
        <div slot="search-content">
          <search-form :search="search" :person-list="personList"></search-form>
        </div>
      </search-btn-view>

      <div class="invalid-record-table-div">
        <el-table fit stripe border :data="records" style="width: 100%" height="parent">
          <el-table-column :resizable="false" label="姓名" prop="userName" key="userName" min-width="80px" align="center" fixed="left">
          </el-table-column>
          <el-table-column :resizable="false" label="部门" prop="deptName" key="deptName" min-width="80px" align="center"></el-table-column>
          <el-table-column :resizable="false" label="车间" prop="workshopName" key="workshopName" min-width="80px" align="center"></el-table-column>
          <el-table-column :resizable="false" label="编号" prop="userId" key="userId" min-width="60px" align="center"></el-table-column>
          <el-table-column :resizable="false" label="工号" prop="workerNo" key="workerNo" min-width="60px" align="center"></el-table-column>
          <el-table-column :resizable="false" label="考勤日期" key="baseCheckDate" width="135px" align="center">
            <template slot-scope="scope">
              <span>{{moment(scope.row.userCheckTime).format('YYYY-MM-DD dddd')}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="打卡时间" key="userCheckTime" min-width="80px" align="center">
            <template slot-scope="scope">
              <span>{{moment(scope.row.userCheckTime).format('HH:mm')}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="打卡有效起始时间" key="validTime" min-width="160px" align="center">
            <template slot-scope="scope">
              <span>{{moment(scope.row.baseCheckStartTime,'HH:mm:ss').format('HH:mm')}}</span>
              <span>-</span>
              <span>{{moment(scope.row.baseCheckEndTime,'HH:mm:ss').format('HH:mm')}}</span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip :resizable="false" label="打卡地点" prop="location" key="location" :min-width="locationWidth"
            header-align="center"></el-table-column>
        </el-table>
      </div>

      <div style="margin-top:10px;text-align:right;" v-if="pagination.totalCount!==0">
        <el-pagination background :page-size="pagination.pageSize" :total="pagination.totalCount" :current-page.sync="pagination.currentPage"
          @current-change="pageChange"></el-pagination>
      </div>
    </div>
  `;

  return {
    props: {
      personList: {
        type: Array,
        default: function () {
          return [];
        }
      }
    },

    data: function () {
      var search = {
        startDate: moment().startOf('month').valueOf(),
        endDate: moment().valueOf(),
        deptPerson: {
          depts: [],
          persons: []
        }
      };
      return {
        loading: false,
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        records: [],
        locationWidth: '80px',
        pagination: {
          currentPage: 1,
          totalCount: 0,
          pageSize: 30
        },
        moment: moment
      };
    },

    created: function () {
      this.setRecords(true);
    },

    methods: {
      setRecords: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }

        var pagination = this.pagination;
        var currentPage = pagination.currentPage;
        var pageSize = pagination.pageSize;
        var start = (currentPage - 1) * pageSize;
        var postData = {
          start:start,
          length:pageSize
        };

        this.setPostData(postData);

        this.loading = true;
        var self = this;
        return ajaxRequest('dingTalk/queryAttendanceInvalid', postData, false).then(function (res) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }

          var records = res.returnData;
          var hasLocation = false;
          for (var i = 0; i < records.length; i++) {
            var record = records[i];
            var location = record.location;
            if (SysUtil.isEmpty(location)) {
              record.location = '打卡机打卡';
            } else {
              if (!hasLocation) {
                hasLocation = true;
              }
            }
          }

          if (hasLocation) {
            locationWidth = "350px";
          } else {
            locationWidth = "80px";
          }
          self.locationWidth = locationWidth;

          self.records = records;
          self.pagination.totalCount = res.iTotalRecords;
          self.loading = false;
        }).catch(function(){
          self.loading = false;
        });
      },

      setPostData:function(postData){
        var search = this.search;
        postData.startDate = moment(search.startDate).format('YYYY-MM-DD');
        postData.endDate = moment(search.endDate).format('YYYY-MM-DD');

        var deptPerson = search.deptPerson;
        postData.deptIds = JSON.stringify(_.map(deptPerson.depts, 'id'));
        postData.userIds = JSON.stringify(_.map(deptPerson.persons, 'id'));
      },

      checkSearchValid: function () {
        var search = this.search;
        var startDate = search.startDate;
        var endDate = search.endDate;
        if (moment(startDate).add(1, 'month').isBefore(endDate, 'day')) {
          this.$alert('只能查询一个月以内的汇总数据', '信息');
          return false;
        }
        return true;
      },

      resetSearch: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },

      searchData: function () {
        this.pagination.currentPage = 1;
        this.setRecords(true);
      },

      pageChange:function(){
        this.setRecords();
      },

      exportExcel:function(){
        var postData = {};
        this.setPostData(postData);
        var formParam = SysUtil.formatFormParam(postData);
        var basePath = SysUtil.getBasePath();
        var path = `${basePath}/dingTalk/exprotExcelAttendSourceInvalidRecord?${formParam}`;
        window.open(path);
      }
    },

    components: {
      SearchBtnView: SearchBtnView,
      SearchForm: AttendanceSearchForm
    },

    template: template
  };
}();
